<template>
	<view class="earnings">
		<view class="" style="height: 40rpx;background:rgba(0, 144, 250, 1);"></view>
		<view class="earnings-head">
			<view class="title">收益</view>
			<view class="right" @tap="billBtn">
				<view class="icon"><image src="/static/gerendian/zhangdan.png" mode=""></image></view>
				<view class="txt">账单明细</view>
			</view>
		</view>
		<view class="earnings-part">
			<view class="title">可提现金额(元)</view>
			<view class="usable">1000.00</view>
			<view class="freeze">冻结金额:1000.00</view>
			<view class="txBtn" @tap="putforward">立即提现</view>
			<view class="rest">
				<view class="rest-aadup">
					<view class="title">累计收益(元)</view>
					<view class="txt">168,888.00</view>
				</view>
				<view class="rest-surplus">
					<view class="title">收益余额(元)<image @tap="issueBtn" style="width:24rpx;height: 24rpx;margin-left: 10rpx;" src="/static/gerendian/wenhao.png" mode=""></image></view>
					<view class="txt">2000.00</view>
				</view>
			</view>
		</view>
		<view class="earnings-day">
			<view class="dayNum" v-for="(item,index) in dayList" :key="index" :class="{'blue':item.type}" @tap="dayBtn(item)">
				{{item.title}}
			</view>
		</view>
		<view class="earnings-content">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData">
				<view class="list" v-for="(item,index) in dataList" :key="index">
					<view class="list-txt">
						<view class="title">{{item.title}}</view>
						<view class="txt">{{item.earnings}}</view>
					</view>
					<view class="list-time">
						{{item.time}}
					</view>
					
				</view>
			</s-pull-scroll>
		</view>
		<uni-popup ref="popup" type="center" zindex='999'>
			<view class="modal">
				<view class="modal-bulb"><image src="/static/gerendian/dpao.png" mode=""></image></view>
				<view class="modal-title">收益余额说明</view>
				<view class="modal-txt">"收益余额"是指冻结金额加可提现金额的总和.</view>
				<view class="modal-line"></view>
				<view class="modal-btn" @tap="closeBtn">我知道了</view>
			</view>
		</uni-popup>
		<personal-tab-bar :current="2" backgroundColor="#FFFFFF" color="#9597A6" tintColor="rgba(0, 144, 250, 1)"></personal-tab-bar>
	</view>
</template>

<script>
	import sPullScroll from '@/src/pages/components/s-pull-scroll/index.vue';
	import uniPopup from '@/src/pages/components/uni-popup/uni-popup.vue';
	export default{
		components: { sPullScroll,uniPopup },
		data(){
			return{
				dayList:[
					{title:'实时',type:true},
					{title:'近3天',type:false},
					{title:'近7天',type:false},
					{title:'近30天',type:false}
				],
				dataList:[
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
					{title:'推广收益',time:'1月13日',earnings:'+88.03'},
				],
				size:'',
				page:'',
			}
		},
		onLoad() {
			
		},
		methods:{
			//****************************************************
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					if (pullScroll.page == 1) {
						this.page =1
						this.size=10
						// this.listFrom()
					}else{
						if(this.size>this.total){
							pullScroll.empty()
						}else{
							// this.page=this.page+1
							this.size=this.size+10
							// this.listPush()
							// this.listFrom()
						}
					}
					
					pullScroll.success();
				}, 1000);
			},
			//**********************************************************
			dayBtn(item){
				if(item.type===true){
					
				}else{
					for(var i=0;i<this.dayList.length;i++){
						this.dayList[i].type = false
					}
					item.type = true
				}
			},
			issueBtn(){
				this.$refs.popup.open()
			},
			closeBtn(){
				this.$refs.popup.close();
			},
			billBtn(){
				uni.navigateTo({
					url:"pages/billList/index"
				})
			},
			putforward(){
				uni.navigateTo({
					url:"pages/drawings/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	.earnings{
		height: 100vh;
		background-color: #FFFFFF;
		.modal{
			width:570rpx;
			height:564rpx;
			background:rgba(255,255,255,1);
			opacity:1;
			border-radius:6rpx;
			position: relative;
			// text-align: center;
			&-line{
				width:384rpx;
				height:0rpx;
				border:1rpx solid rgba(204,204,204,1);
				opacity:1;
				margin: auto;
				margin-top: 75rpx;
			}
			&-txt{
				width:386rpx;
				height:76rpx;
				font-size:28rpx;
				font-family:Source Han Sans CN;
				font-weight:400;
				line-height:38rpx;
				color:rgba(167,167,167,1);
				opacity:1;
				margin: auto;
				// margin-top: 86rpx;
			}
			&-btn{
				width:386rpx;
				height:92rpx;
				background:rgba(0,144,250,1);
				opacity:1;
				border-radius:46rpx;
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				line-height:92rpx;
				color:rgba(255,255,255,1);
				opacity:1;
				margin: auto;
				margin-top: 50rpx;
				text-align: center;
			}
			&-bulb{
				width:112rpx;
				height:112rpx;
				background:rgba(236,247,255,1);
				border-radius:50%;
				position: absolute;
				top: -50rpx;
				left: 40%;
				opacity:1;
				image{
					width: 100%;
					height: 100%;
				}
			}
			&-title{
				width:210rpx;
				height:44rpx;
				font-size:34rpx;
				font-family:Source Han Sans CN;
				font-weight:bold;
				line-height:44rpx;
				color:rgba(77,77,77,1);
				// letter-spacing:30px;
				margin: auto;
				padding-top: 86rpx;
				margin-bottom: 110rpx;
				opacity:1;
			}
		}
		&-content{
			position: relative;
			height: 42%;
			// margin-top: 20rpx;
			.list{
				padding: 36rpx 40rpx;
				border-bottom: 2rpx solid rgba(229, 234, 238, 1);
				&-time{
					font-size:28rpx;
					font-family:Source Han Sans CN;
					font-weight:400;
					color:rgba(207,207,207,1);
					opacity:1;
				}
				&-txt{
					display: flex;
					.title{
						font-size:32rpx;
						font-family:Source Han Sans CN;
						font-weight:400;
						color:rgba(69,69,69,1);
						opacity:1;
					}
					.txt{
						margin-left: auto;
						font-size:36rpx;
						font-family:Source Han Sans CN;
						font-weight:bold;
						color:rgba(242,85,85,1);
						opacity:1;
					}
				}
			}
		}
		&-day{
			width:100%;
			height:94rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx 6rpx 12rpx rgba(0,0,0,0.16);
			opacity:1;
			display: flex;
			padding: 28rpx 40rpx;
			.dayNum{
				font-size:28rpx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:rgba(77,77,77,1);
				opacity:1;
				margin-right: 70rpx;
			}
			.blue{
				color: rgba(0, 144, 250, 1);
			}
		}
		&-part{
			width:100%;
			height:450rpx;
			opacity:1;
			background: url(../../../../static/gerendian/txbj.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			text-align: center;
			padding: 32rpx 0;
			.rest{
				width: 100%;
				display: flex;
				margin-top: 44rpx;
				align-items: center;
				&-aadup{
					flex: 1;
					.title{
						font-size:20rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(255,255,255,1);
						opacity:1;
					}
					.txt{
						font-size:30rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(255,255,255,1);
						opacity:1;
					}
				}
				&-surplus{
					flex: 1;
					.title{
						font-size:20rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(255,255,255,1);
						opacity:1;
					}
					.txt{
						font-size:30rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(255,255,255,1);
						opacity:1;
					}
				}
			}
			.title{
				font-size:24rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(255,255,255,1);
				opacity:1;
			}
			.usable{
				font-size:50rpx;
				font-family:Arial;
				font-weight:400;
				color:rgba(255,255,255,1);
				opacity:1;
				margin-top: 8rpx;
				margin-bottom: 14rpx;
			}
			.freeze{
				width:296rpx;
				height:40rpx;
				background:rgba(104,181,238,1);
				opacity:0.45;
				border-radius:44rpx;
				font-size:24rpx;
				font-family:PingFang SC;
				font-weight:400;
				line-height:40rpx;
				color:rgba(255,249,249,1);
				opacity:1;
				margin: auto;
			}
			.txBtn{
				width:518rpx;
				height:72rpx;
				background:rgba(255,255,255,1);
				border-radius:36rpx;
				font-size:30rpx;
				font-family:PingFang SC;
				font-weight:bold;
				line-height:72rpx;
				color:rgba(0,144,250,1);
				opacity:1;
				margin: auto;
				margin-top: 36rpx;
			}
		}
		&-head{
			width: 100%;
			height: 90rpx;
			background-color: rgba(0, 144, 250, 1);
			display: flex;
			align-items: center;
			padding: 0 57rpx;
			.title{
				font-size:36rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(255,255,255,1);
				opacity:1;
			}
			.right{
				width: 100rpx;
				margin-left: auto;
				.icon{
					width: 34rpx;
					height: 34rpx;
					margin: auto;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.txt{
					font-size:24rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(255,255,255,1);
					opacity:1;
					margin-top: 4rpx;
				}
			}
		}
	}
</style>